{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    闪购超市
{% endblock %}

{% block extcss %}
    <link rel="stylesheet" href="{% static 'market/css/market.css' %}">
{% endblock %}

{% block extjs %}
    <script src="{% static 'market/js/jquery.cookie.js' %}"></script>
    <script src="{% static 'market/js/market.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="market">

{#        侧边栏(分类)#}
        <div class="type-slider">
            <ul>
                {% for foodtype in foodtypes %}
                    <li class="type-item">
                        <span></span>
                        <a href="{% url 'axf:market' foodtype.typeid 0 0 %}">
                            {{ foodtype.typename }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>

{#        导航(分类、排序)#}
        <nav>
            <ul>
                <li id="category-bt">
                    <span>
                        全部类型
                        <i class="glyphicon glyphicon-arrow-up"></i>
                    </span>
                </li>
                <li id="sort-bt">
                    <span>
                        综合排序
                        <i class="glyphicon glyphicon-arrow-up"></i>
                    </span>
                </li>
            </ul>
        </nav>

{#        商品列表#}
        <div class="main-content">
            <div class="content-wrapper">
                <ul>
                    {% for goods in goodslist %}
{#                        一个个商品#}
                        <li>
                            <a href="#">
                                <img class="goods-img" src="{{ goods.productimg }}" alt="">
                                <div class="goods-info">
                                    <p class="name">
                                        {{ goods.productlongname }}
                                    </p>
                                    <p class="detailtag">
                                        {% if goods.isxf %}
                                            <span class="xf">精选</span>
                                        {% endif %}
                                        销量:{{ goods.productnum }}
                                    </p>
                                    <p class="specifics">
                                        规格:{{ goods.specifics }}
                                    </p>
                                    <p class="price">
                                        <span class="now-price"> ￥{{ goods.price }} </span>
                                        <span class="market-price">
                                            ￥{{ goods.marketprice }}
                                        </span>
                                    </p>
                                </div>
                            </a>
{#                            按钮操作#}
                            <div class="bt-wrapper">
                                <span class="glyphicon glyphicon-minus" goodsid="{{ goods.id }}"></span>
                                <span class="num">
                                    {% for cart in carts %}
{#                                        表示当前购物车记录，是这件商品#}
                                        {% if goods.id == cart.goods.id %}
                                            {{ cart.number }}
                                        {% endif %}
                                    {% endfor %}
                                </span>
                                <span class="glyphicon glyphicon-plus" goodsid="{{ goods.id }}"></span>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>

{#           子类#}
            <div class="bounce-view category-view">
                <div class="bounce-wrapper">
                    {% for child in childtypelist %}
                        <a href="{% url 'axf:market' categoryid child.childid 0 %}">
                            {{ child.childname }}
                        </a>
                    {% endfor %}
                </div>
            </div>


            {#           综合排序#}
            <div class="bounce-view sort-view">
                <div class="bounce-wrapper">
                    <a href="{% url 'axf:market' categoryid childid 0 %}">
                        综合排序
                    </a>
                    <a href="{% url 'axf:market' categoryid childid 1 %}">
                        销量排序
                    </a>
                    <a href="{% url 'axf:market' categoryid childid 2 %}">
                        价格最低
                    </a>
                    <a href="{% url 'axf:market' categoryid childid 3 %}">
                        价格最高
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}